We have covered how to set up a basic page, and how to format and emphasis text, but
it's going to look a bit boring if we have a text only web site. It's time to add
some pictures.

Images are added with the IMG tag. <IMG SRC="mypic.gif"> will show an image at the
current position in the text. There are several attributes to IMG that let you
specify how it should appear, the main ones are; SRC, ALT, WIDTH, HEIGHT, ALIGN,
HSPACE, VSPACE and BORDER.

SRC gives the name of the image to show. This can be a relative address, for a file
on the same site, such as <IMG SRC="images/logo.gif"> or an absolute address to
display an image from another site like <IMG SRC="http://www.company.com/banner.gif">.
Generally it is a poor idea to link to images on another site. If you wish to display
someone's logo it's usually better to have a copy on your site, this may give faster
loading and is friendlier to them if their web space has bandwidth restrictions.

ALT defines the text to be shown when the image is not loaded. This is very important
and is now a required attribute in the latest HTML specification. If you are
accessing a site over a slow dialup link, you don't want to wait for a dozen button
images to download before you can see which one to click on to get where you want.
Something like <IMG SRC="images/news.gif" ALT="News"> will allow your visitor to go
straight to the news section of your site without unnecessary delay. You can include
an IMG tag within many of the text formatting tags we discussed last month to alter
the way the ALT text is displayed.

WIDTH and HEIGHT serve two purposes. The most important is to let the browser know
how much space to allocate for the image when rendering the page. If you omit these,
the browser will display a standard icon where each image should be placed, then it
will have to reflow the text to fit around the graphics after each one has loaded.
This is what causes that annoying redrawing and jumping around as a page loads. The
WIDTH and HEIGHT attributes mean the browser can leave the correct space in advance
and simply draw the images as they download.

The second use of the size attributes is to rescale images. Most of the time this is
not a desirable feature, if you scale the image to a larger size it will look blocky,
if you scale it to a smaller size the visitor wastes time downloading a larger image
than they need. However, if the same image appears several times in your document, in
different sizes, it can sometimes help to use a single image in the largest size and
scale it, saving your visitor downloading different versions. Be careful if you
decide to use this, different browsers scale images in different ways and it may not
always look as you intended. The scaling routines used by browsers aren't as good as
those used by graphics programs, so you may prefer to use separate images.





Aligning images and text

Putting an image in the middle of a block of text won't usually look very good, but
there are several ways to define how it should be aligned. The simplest is to
separate it from the text with <P> or <BR>, possibly using <DIV> to centre it.
Something like

...here is some text.
<P>
<DIV ALIGN=CENTER><IMG SRC="mypic.gif" ALT="pic" WIDTH="200" HEIGHT="100"></DIV>
<P>
Here is some more text...

Will show the image between two blocks of text and centred on the page. Until
the image is loaded, the browser will display a 200x100 box containing the ALT
text.

ALIGN will align an image with a block of text in a number of ways. The first three
options are TOP, MIDDLE and BOTTOM, to align the text with the top, middle or bottom
of the image. This is fairly limited and only really works with a single line of
text, since the second line will appear below the image. More useful options are LEFT
and RIGHT, to place the image on the left or right side of the window and flow text
around the other side. If you want to flow text around an image, it is doubly
important that you specify the WIDTH and HEIGHT of the image, or the text may start
shifting around while you try to read it. To place your image on the right hand side
of the page and flow the following text around it, use

<IMG SRC="mypic.gif" ALT="pic" WIDTH="200" HEIGHT="100" ALIGN=RIGHT>
Paragraph of text

You know exactly how big the image is, it will be the same size in every browser, but
you have no way of knowing how much space the text will occupy as this depends on the
size of your visitor's browser window and the fonts they use. What happens if the
text takes up less space than is available at the side of the image and you don't
want the next paragraph to smart alongside this image? Don't worry, HTML has an
option to take care of that. Just as the ALIGN attribute of IMG starts text flowing
around an image, the CLEAR attribute of BR stops it. <BR CLEAR=RIGHT> will move down
the page until the right margin is clear before placing the next object or text. The
LEFT and ALL options do the same for the left margin or both margins.

When you flow text around an image you will see that the text touches the image, which can
make it harder to read. HSPACE tells the browser how many pixels of clear space to leave
at the sides of the image, VSPACE does the same for top and bottom of the image. A small
margin of empty space around each image can greatly improve the appearance and legibility
of a page.

The last attribute for IMG is BORDER, this sets the thickness of any border that
appears around the image. The default size is 1 and most browsers won't display a
border of this size unless the image is also a link (more on that later). Setting it
to a higher value will create a border around an image, although you can't be sure
what colour it will appear in. Setting it to 0 means no border will be displayed,
even if the image is a link. This is not always a good idea, there's not much point
in placing a link on a page and then making it look like it isn't a link, but there
are times it can be useful. If you have a menu of button images, it's fairly obvious
that buttons are to be clicked on, and the appearance is often improved by removing
the border around link buttons.




Linking from images


We've seen how you can enclose an image within style tags to affect the display of
the ALT text, or DIV tags to align it on the page. you can also use an image within
the A tag to make it a link. There are two popular uses for this, the first is to use
a thumbnail of an image link to a larger version of the image, something like

<A HREF="images/bigpic.jpg"><IMG SRC="images/smallpic.gif" WIDTH=x HEIGHT=y ALT="Cool picture">

can be used to display a small picture inline that loads the large version when you
click on it. The larger image is contained in the A tag, so it is not displayed
inline like the IMG tag's picture. Instead it is loaded as a separate document and
displayed using whatever means you have configured in your browser. This could mean
it is displayed in a browser window on its own, or it could be passed to another
program, like FastView, for display on a separate screen.

The second popular use of image links is for navigation buttons. Let's go back to our
example of a local information site from Part 1 and set up a row of buttons across
the top of the page;

<DIV ALIGN=CENTER>
<A HREF="home.html"><IMG SRC="images/home.gif" ALT="Home" WIDTH=80 HEIGHT=30 BORDER=0></A>
<A HREF="shops.html"><IMG SRC="images/shops.gif" ALT="Shops" WIDTH=80 HEIGHT=30 BORDER=0></A>
<A HREF="pubs.html"><IMG SRC="images/pubs.gif" ALT="Pubs" WIDTH=80 HEIGHT=30 BORDER=0></A>
<A HREF="amenities.html"><IMG SRC="images/amenities.gif" ALT="Amenities" WIDTH=80 HEIGHT=30 BORDER=0></A>
<A HREF="location.html"><IMG SRC="images/location.gif" ALT="Location" WIDTH=80 HEIGHT=30 BORDER=0></A>
</DIV>

The examples in the screen grabs are on the CD, where you can view the HTML source to
see how each image alignment option works.




Boxouts
=======


Image formats

Although the main image format on the Amiga is IFF ILBM, we need a more generic format for
web pages. There are three main formats to consider, all of which use some form of data
compression to reduce download times.

Format Pros Cons Comments

GIF Well supported Limited to 256 colours GIF is ideal for logo and button
Fast decoding images, and results in small
Handles animation files of high quality





JPEG 24 bit Slower decoding JPEG is best suited to photographic
High compression `Lossy' compression type images, where it's high
compression gives small files
with minimal loss of quality

PNG 24 bit Not supported by PNG is a very good
Good compression all browsers image format, but
No quality loss is not yet well
enough supported






Caching

All browsers keep copies of files downloaded in a cache. No matter how many time you use
that image on your pages, the browser only has to download it once. You can make a big
difference to the time it takes your pages to load by using the same image in several
places.